<!DOCTYPE html>
<html>
<head>
  <!-- 页面meta -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>电商后台管理</title>
  <meta name="description" content="电商后台管理">
  <meta name="keywords" content="电商后台管理">
  <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="../plugins/elementui/index.css">
  <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="../css/style.css">
</head>
<body class="hold-transition">
<div id="app">
  <div class="content-header">
    <h1>用户管理<small>用户信息管理</small></h1>
    <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户信息管理</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <div class="app-container">
    <div class="box">

      <div class="filter-container">
        <el-input placeholder="用户名/邮箱" v-model="pagination.queryString" style="width: 200px;" class="filter-item"></el-input>
        <el-button @click="getUserPageList" class="dalfBut">查询</el-button>
      </div>
      <!--
          :data="后台获取的集合json数据"
       -->
      <el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>
        <el-table-column label="序号" type="index"  width="180px"  align="center"></el-table-column>
         <!-- 表格数据 -->
        <el-table-column label="用户名" prop="username"  width="180px"  align="center"></el-table-column>
        <el-table-column label="电话" prop="phone"  width="180px"  align="center"></el-table-column>
        <el-table-column label="邮箱" prop="email"  width="180px"  align="center"></el-table-column>
        <el-table-column label="性别" width="180px"  align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.gender == '0'?'女':'男'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="180px"  align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.isDelete == '0'?'正常':'锁定'}}</span>
            </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-switch
                    v-model="scope.row.isDelete"
                    :active-value="0"
                    :inactive-value="1"
                    active-color="#13ce66"
                    inactive-color="#c0c0c0"
                    @change="handleStatusChange(scope.row)">>
            </el-switch>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container" style="text-align: center;">
           <!-- 分页插件 -->
        <el-pagination class="pagination"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="pagination.currentPage"
                     :page-sizes="[2, 5, 10, 20]"
                     :page-size="pagination.pageSize"
                     layout="total,sizes, prev, pager, next, jumper"
                     :total="pagination.total">
        </el-pagination>
      </div>
    </div>
  </div>
</div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script src="../js/request.js"></script>
<script src="../js/auth.js" type="module"></script>

<script src="../js/user.js" type="module"></script>
</html>